<template>
  <div class="info-view">
    <el-row>
      <div style="padding: 10px;">
        <el-form ref="form" :model="form" size="small" class="spider-form" label-width="100px">
          <el-form-item label="k8s实例" prop="k8sInstanceId">
            <el-select v-model="form.k8sInstanceId" filterable placeholder="请选择">
              <el-option
                v-for="item in k8sList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="k8s命名空间" prop="k8sNameSpace">
            <el-select v-model="form.k8sNameSpace" filterable placeholder="请选择">
              <el-option
                v-for="item in namespaceList"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-row>
    <el-row>
      <el-button
        size="small"
        type="primary"
        icon="el-icon-check"
        style="margin-right: 10px"
        @click="doSaveK8sConfig"
      >
        保存
      </el-button>
    </el-row>
  </div>
</template>

<script>

import { mapGetters } from 'vuex'
import * as APIS from '@/api/server'
import { Notification } from 'element-ui'
import { saveOrUpdate as paramSaveOrUpdate } from '@/api/deploy/dpServerConfig'
import { getK8sList } from '@/api/deploy/dpK8sInstance'

export default {
  name: 'DpServerK8sConfig',
  components: { },
  props: {
    projectId: {
      type: Number,
      default: () => { return -1 }
    }
  },
  data() {
    return {
      form: { projectId: this.projectId, env: this.env },
      k8sList: []
    }
  },
  computed: {
    ...mapGetters([
      'env'
    ]),
    namespaceList() {
      if (!this.form.k8sInstanceId) {
        return []
      }

      const filterK8sInstanceList = this.k8sList.filter(item => item.id === this.form.k8sInstanceId)
      if (filterK8sInstanceList.length === 0) {
        return []
      }

      const namespaceList = filterK8sInstanceList[0].namespaceList
      return namespaceList.split(',')
    }
  },
  watch: {
  },
  created() {
    // 监听应用下拉框选择事件
    this.$bus.$on('global-env-change', this.refreshData)
    this.$bus.$on('global-env-change', this.reloadK8sInstance)
  },
  mounted() {
    this.refreshData()
    this.reloadK8sInstance()
  },
  methods: {
    doSaveK8sConfig() {
      const postData = { projectId: this.projectId,
        env: this.env,
        modifyK8sInstanceId: true,
        k8sInstanceId: this.form.k8sInstanceId,
        modifyK8sNameSpace: true,
        k8sNameSpace: this.form.k8sNameSpace }
      paramSaveOrUpdate(postData).then(res => {
        Notification.success({ title: '保存成功', duration: 1000 })
      })
    },
    reloadK8sInstance() {
      getK8sList(this.env).then(data => {
        this.k8sList = data
      })
    },
    refreshData() {
      this.queryLoading = true
      return APIS.getServerConfigByProjectIdAndEnv({
        projectId: this.projectId,
        env: this.env
      }).then(res => {
        if (res == null || res === '') {
          Notification.error({
            title: '部署参数值未配置',
            duration: 2000
          })
          return
        }
        this.form = { projectId: this.projectId, env: this.env, k8sInstanceId: res.k8sInstanceId, k8sNameSpace: res.k8sNameSpace }
      }).catch(err => {
        Notification.error({
          title: err,
          duration: 2000
        })
      }).finally(() => {
        this.queryLoading = false
      })
    }
  }
}
</script>

<style scoped>
  .spider-form {
    padding: 10px;
  }

  .button-container {
    padding: 0 10px;
    width: 100%;
    text-align: right;
  }

  .el-autocomplete {
    width: 100%;
  }

  .info-view > > > .el-upload-list {
    display: none;
  }

  .button-group {
    width: 100%;
    text-align: left;
    margin-top: 15px;
    margin-bottom: 0px;
    margin-left: 12px;
  }

  .el-divider--horizontal {
    margin: 5px;
  }
</style>
